<template>
  <div class="wrap-container">
    <div class="wrap_top flex">
      <div class="write_l">
        <div class="manage_tit">
          <div class="line"></div>
          <p>人工核销</p>
        </div>
        <el-input v-model="inputCode" placeholder="请输入6位核销码"></el-input>
        <el-button type="primary" @click="getOrderInfo">确 定</el-button>
      </div>
      <div class="write_r flex" v-if="details">
        <div class="order_info flex">
          <div>
            <div class="info_item">
              <span class="label">订单编号</span>
              <span>{{ details.orderNo }}</span>
            </div>
            <div class="info_item">
              <span class="label">预定场馆</span>
              <span>{{ details.stadiumName }}</span>
            </div>
            <div class="info_item">
              <span class="label">预定场地</span>
              <span>{{ details.siteName }}</span>
            </div>
            <div class="info_item">
              <span class="label">预定时段</span>
              <span>{{ details.times }}</span>
            </div>
          </div>
          <div style="margin-left: 75px">
            <div class="info_item">
              <span class="label">下单时间</span>
              <span>{{ details.formatDate }}</span>
            </div>
            <div class="info_item">
              <span class="label">会员姓名</span>
              <span>{{ details.nickName }}</span>
            </div>
            <div class="info_item" v-hasPermi="['sys:order:btn_show_phone']">
              <span class="label">联系方式</span>
              <span>{{ details.orderPhone }}</span>
            </div>
          </div>
        </div>
        <div class="handle_btn">
          <el-button type="primary" @click="handleSure">确认核销</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </div>
    </div>
    <div class="table_box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>核销记录</p>
      </div>
      <el-table v-loading="loading" :data="tableData">
        <el-table-column label="ID" width="50">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核销码" prop="verificationCode" width="100" />
        <el-table-column label="核销类型" prop="writeType" width="90" />
        <el-table-column label="核销人员" prop="writeUserName" width="120" />
        <el-table-column label="核销时间" prop="writeTime" width="160" />
        <el-table-column label="订单来源" prop="orderSource" width="120" />
        <el-table-column label="区域" prop="areaName" width="100" />
        <el-table-column label="预约场馆" prop="stadiumName" show-overflow-tooltip />
        <el-table-column label="预约时段 ">
          <template #default="{ row }"> {{ row.formatDate }} {{ row.times }} </template>
        </el-table-column>
        <el-table-column label="会员姓名" prop="nickName" width="120" />
        <el-table-column
          label="联系电话"
          prop="orderPhone"
          v-hasPermi="['sys:order:btn_show_phone']"
          width="120"
        />
        <el-table-column label="核销结果" prop="writeResultData" width="100" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <div class="table_btn">
              <el-button
                class="primary_text"
                type="text"
                v-hasPermi="['sys:write:btn_view']"
                @click="handleDetail(row.orderId)"
                >查看</el-button
              >
              <el-button
                type="text"
                v-hasPermi="['sys:write:btn_remove']"
                @click="handleDel(row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import {
  getOrderDetailByCode,
  getWriteOrderList,
  writeCode,
  deleteWriteRecord,
} from '@/api/order/order.js'
import { useStore } from 'vuex'

defineOptions({
  name: 'WriteOff',
})

interface QueryParams {
  pageNum: number
  pageSize: number
}

interface DetailItem {
  orderNo: string
  stadiumName: string
  siteName: string
  times: string
  formatDate: string
  nickName: string
  orderPhone: string
  siteList: string[]
  bulletinList: string[]
}

interface TableItem {
  id: number
  verificationCode: string
  writeType: string
  writeUserName: string
  writeTime: string
  orderSource: string
  areaName: string
  stadiumName: string
  formatDate: string
  times: string
  nickName: string
  orderPhone: string
  writeResultData: string
  orderId: number
}

const store = useStore()
const router = useRouter()

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
})

const total = ref(0)
const inputCode = ref('')
const details = ref<DetailItem | null>(null)
const loading = ref(false)
const tableData = ref<TableItem[]>([])

// 根据核销码获取订单详情
const getOrderInfo = async () => {
  if (inputCode.value != '') {
    try {
      const { data } = await getOrderDetailByCode({
        verificationCode: inputCode.value,
      })
      details.value = data
      if (details.value) {
        details.value.siteName = details.value.siteList.join('、')
        details.value.times = details.value.bulletinList.join('、')
      }
    } catch (error) {
      console.error(error)
      details.value = null
    }
  } else {
    details.value = null
  }
}

// 获取核销记录
const getList = async () => {
  loading.value = true
  try {
    const res = await getWriteOrderList(queryParams)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  } catch (error) {
    console.error(error)
    loading.value = false
  }
}

// 取消
const handleCancel = () => {
  inputCode.value = ''
  details.value = null
}

// 确认核销
const handleSure = debounce(
  async () => {
    try {
      const params = {
        userId: store.state.user.id,
        inputCode: inputCode.value,
        deptId: store.state.user.deptId,
        userName: store.state.user.name,
      }
      const res = await writeCode(params)
      ElMessage.success(res.msg)
      handleCancel()
      queryParams.pageNum = 1
      getList()
    } catch (error) {
      console.error(error)
    }
  },
  1000,
  {
    leading: true,
    trailing: false,
  },
)

// 查看订单详情
const handleDetail = (id: number) => {
  router.push({
    path: '/order/detail',
    query: { id },
  })
}

// 删除核销记录
const handleDel = (id: number) => {
  ElMessageBox.confirm('是否确认删除选中的数据项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        await deleteWriteRecord({ writeId: id })
        getList()
        ElMessage.success('删除成功')
      } catch (error) {
        console.error(error)
      }
    })
    .catch(() => {})
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.wrap_top {
  background: #fff;
  padding: 9px 15px;
  height: 197px;
  box-sizing: border-box;
  .el-button {
    width: 89px;
    height: 34px;
    line-height: 34px;
    border-radius: 11px;
    background: #0988fb;
    padding: 0;
    &.el-button--default {
      background: #a6a6a6;
      color: #fff;
      border-color: #a6a6a6;
    }
  }
  .write_l {
    padding: 11px 41px 20px 0;
    .el-input {
      width: 356px;
      margin-top: 28px;
      margin-left: 4px;
      display: block;
      :deep(.el-input__inner) {
        height: 46px;
        line-height: 46px;
      }
    }
    .el-button {
      margin-top: 22px;
      margin-left: 4px;
    }
  }
  .write_r {
    padding: 12px 0 0 41px;
    border-left: 3px solid #e5e5e5;
    .order_info {
      font-size: 14px;
      color: #212121;
      line-height: 21px;
      .info_item {
        margin-top: 14px;
        .label {
          margin-right: 14px;
        }
      }
    }
    .handle_btn {
      margin-top: 14px;
      margin-left: 253px;
      .el-button {
        display: block;
        & + .el-button {
          margin-left: 0;
          margin-top: 16px;
        }
      }
    }
  }
}
.table_box {
  padding-top: 15px;
  .el-table {
    margin-top: 15px;
    &::before {
      display: none;
    }
  }
  :deep(.el-table__body-wrapper) {
    height: calc(100vh - 494px);
  }
}
</style>
